<template>
  <div>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
  <el-form-item label="文章名字">
    <el-input v-model="title" placeholder="输入文章"></el-input>
  </el-form-item>
  <el-form-item label="作者名字">
    <el-input v-model="username" placeholder="输入作者名字"></el-input>
  </el-form-item>
  <el-form-item label="文章分类">
    <el-select v-model="cname" placeholder="文章分类" @change="changeSelect">
      <el-option v-for="(item,index) in Classify" :label="item.name" :value="item.name" :key="index"></el-option>
    </el-select>
  </el-form-item>
   <el-form-item label="排序条件">
    <el-select v-model="condition" placeholder="排序条件" @change="changeCondition">
       <el-option label="修改时间" value="updatetime"></el-option>
      <el-option label="创建时间" value="createtime"></el-option>
      <el-option label="观看次数" value="view"></el-option>
      <el-option label="收藏数" value="collection"></el-option>
      <el-option label="点赞数" value="good"></el-option>
    </el-select>
  </el-form-item>


<el-form-item label="排序类型">
    <el-select v-model="sort" placeholder="排序条件" @change="changeSort">
      <el-option label="降序" value="desc"></el-option>
      <el-option label="升序" value="asc"></el-option>
    </el-select>
  </el-form-item>

  <el-form-item>
    <el-button type="primary" @click="onSubmit">查询</el-button>
    <el-button type="primary" @click="selall">获取所有</el-button>
  </el-form-item> 



   <el-table
    :data="blogData.data"
    border
    style="width: 100%">
    <el-table-column
      fixed
      prop="id"
      label="博客id"
      width="150">
    </el-table-column>
    <el-table-column
      prop="title" 
      label="博客题目"
      width="120">
    </el-table-column>
    <el-table-column
      prop="img"
      label="博客图片"
      width="120">
      <template #default="scope">
                    <el-image  v-if="`${scope.row.img}`!=''" style="width:100px;height:100px;margin-bottom:-4px;"
                      :src="`http://114.132.214.60:8080/blog/cat?img=${scope.row.img}`">
                    </el-image>
                    <p v-else>
                      未设封面
                    </p>
                  </template>
    </el-table-column>
    <el-table-column
      prop="username"
      label="作者名字"
      width="120">
    </el-table-column>
    <el-table-column
      prop="cname"
      label="博客类型"
      width="120">
    </el-table-column>
    <el-table-column
      prop="type"
      label="博客状态"
      width="300">
      <template #default="scope">
           <p v-show="`${scope.row.type}`==3">
            推举
           </p>
            <p v-show="`${scope.row.type}`==1">
            上线
           </p>
                  </template>
    </el-table-column>
     <el-table-column
      prop="good"
      label="点赞"
      width="120">
    </el-table-column>
     <el-table-column
      prop="comm"
      label="评论"
      width="120">
    </el-table-column>
     <el-table-column
      prop="collection"
      label="收藏"
      width="120">
    </el-table-column>
        <el-table-column
      prop="view"
      label="观看次数"
      width="120">
    </el-table-column>
      </el-table-column>
        <el-table-column
      prop="createtime"
      label="创建时间"
      width="120">
    </el-table-column>
      </el-table-column>
        <el-table-column
      prop="updatetime"
      label="修改时间"
      width="120">
    </el-table-column>
  
    
    <el-table-column
      fixed="right"
      label="操作"
      width="100">
      <template slot-scope="scope">
        <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
        <el-button type="text" size="small" @click="toEditor(scope.row)">编辑</el-button>
        <el-button type="text" size="small" @click="del(scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</el-form>

<el-pagination
@current-change="topages"
@next-click="next"
@prev-click="pre"
  background
  layout="prev, pager, next"
  :page-size="pageSize"
  :total="total">
</el-pagination>


<el-dialog
  title="文章内容"
  :visible.sync="dialogVisible"
  :before-close="handleClose">
  <div v-html="bloginfo.replace(/<img/g, '<img style=max-width:100%;height:auto; ')" > </div>
    <el-button @click="dialogVisible = false" >取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
</el-dialog>


<el-dialog
  title="编辑文章"
  :visible.sync="dialogVisible1"
  :before-close="handleClose">
  

<el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign">
  <el-form-item label="名称">
    <!-- <el-input v-model="formLabelAlign.name"></el-input> -->
    {{formLabelAlign.name}}
  </el-form-item>
   <el-form-item label="文章状态">
    <el-select v-model="formLabelAlign.type" placeholder="文章类型" @change="changeSelect1">
      <el-option label="上线" value="1" ></el-option>
      <el-option label="未上线" value="2" ></el-option>
      <el-option label="推举" value="3" ></el-option>
      <el-option label="不通过" value="0" ></el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="不通过的理由" v-show="isaudit">
    <el-input v-model="formLabelAlign.audit"></el-input>
  </el-form-item>
</el-form>

    <el-button @click="noUpdate" >取 消</el-button>
    <el-button type="primary" @click="updateBlog()">确 定</el-button>
  </span>
</el-dialog>


  </div>
</template>

<script>
import { Message } from 'element-ui'
export default {
 data() {
      return {
        // 排序条件
        condition:"",
        // 排序类型
        sort:"",
        // 修改图片的名字
        upid:"",
        // 通过的验证字段
        isaudit:false,
         labelPosition: 'left',
        formLabelAlign: {
          name: '',
          audit: '',
          type: ''
        },

        // 博客内容
        bloginfo:"",

        // 请求的页数
        page:1,
        pageSize:5,

        // 查询条件
        title:"",
        cname:"",
        username:"",
        Classify:"",

        // 数据集合
        blogData:{},

        // 以下为分页器
        total:89,

        // 显示提示框(查看的)
         dialogVisible: false,
        //  显示提示框（编辑的）
        dialogVisible1:false,
        // 表单
        formInline: {
          user: '',
          region: ''
        }
      }
    },
    mounted() {
        this.getblogList()
        this.getClassifys()
    },
    methods: {
      // 删除文章
      del(e){
          this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
           this.$API.blog.delBlog(e.id).then(()=>{
             this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.getblogList()
          }).catch((e)=>{
             this.$message({
            type: 'error',
            message: e
          });
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      },
      // 排序条件
      changeCondition(e){
        this.condition=e
        console.log(this.condition);
      },
      // 排序类型
      changeSort(e){
        this.sort=e
        console.log(this.sort);
      },
      // 确认修改
      updateBlog(){
        if(this.formLabelAlign.type==0 && this.formLabelAlign.audit==""){
          return this.$message({
          message: "未填入未通过信息",
          type: 'warning'
        });
        }
        this.$API.blog.updateBlog(this.upid,this.formLabelAlign.type,this.formLabelAlign.audit).then((e)=>{
             this.$message({
          message: e.msg,
          type: 'success'
        });
        }).catch((e)=>{
          this.$message.error(e.msg);
        })

        this.upid="",
        this.formLabelAlign.name=""
        this.formLabelAlign.audit=""
        this.formLabelAlign.type=""
        this.dialogVisible1 = false
        this.getblogList()
      },
      // 取消修改
      noUpdate(){
        this.dialogVisible1 = false
        this.upid="",
        this.formLabelAlign.name=""
        this.formLabelAlign.audit=""
        this.formLabelAlign.type=""
      },
      // 修改选项
      changeSelect1(e){
        console.log(e);
        console.log(e==0);
        if(e==0){
          this.isaudit=true
        }
      },
      // 编辑
      toEditor(e){   
        this.upid=e.id
        this.formLabelAlign.name=e.title
        this.dialogVisible1=true
      },
      // 获取所有文章数据
      selall(){
        this.sort=""
        this.condition=""
        this.username=""
        this.title=""
        this.cname=""
        this.getblogList()
      },
      // 查看文章的内容
      handleClick(e){
       this.getBlogInfo(e.id).then(()=>{
        this.dialogVisible=true
       })
      },
      // 获取文章详情
      async getBlogInfo(id){
        let result=await this.$API.blog.getBlogInfo(id)
        this.bloginfo=result.data.content
      },
      // 获取分类
      changeSelect(e){
        console.log(e); 
        this.cname=e
      },
      // 获取分类数据
      async getClassifys(){
        const result=await this.$API.blog.getClassifys()
        if(result.code==200){
          this.Classify=result.data
          console.log(this.Classify);
        }
      },
      // 切换页面
      topages(e){
        this.page=e
        this.getblogList()
      },
      //切换下一页
      next(){
       this.page++
       this.getblogList()
      },
      // 切换上一页
      pre(){
        this.page--
        this.getblogList()
      },
        // 页面初始化的数据
        async getblogList(){

            const result =await  this.$API.blog.getblog(this.title,this.username,this.cname,this.condition,this.sort,this.page,this.pageSize)
            console.log(result);
           if(result.code==200){
            this.blogData=result.data
            this.total=result.data.size
            console.log(this.total);
           }
        },
       async onSubmit() {
        this.getblogList()
      },
        handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      }
    }
  
}
</script>

<style>
.el-pagination{
    margin-top: 50px;
}


</style>